{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="{% static 'echarts.min.js' %}"></script>
</head>
<body>
<div id="container" style="width: 100%;height: 1500px;border: 2px solid black;margin-top: 50px;"></div>

<script type="text/javascript">
    var neo4j_data = [{{ neo4j_data|safe }}]
    var data1 = neo4j_data[0]['data']
    var links1 = neo4j_data[0]['links']
    console.log(data1)
    console.log(links1)
    var myChart = echarts.init(document.getElementById('container'));

    var option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            enterable: true,//鼠标是否可进入提示框浮层中
            formatter: formatterHover,//修改鼠标悬停显示的内容
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        toolbox: {
            feature: {
                saveAsImage: {
                    show: true,
                    name: "neo4j-graph"
                }
            }
        },
        series: [
            {
                type: "graph",
                layout: "force",  {# force:游动 #}
                symbolSize: 50,
                roam: true,
                edgeSymbol: ["circle", "arrow"],
                edgeSymbolSize: [4, 10],
                edgeLabel: {    {# 边上的标签 #}
                    show: true,
                    fontSize: 12,
                    formatter: function (params) {
                        return params.data.type;
                    }
                },
                force: {
                    repulsion: 1000
                },
                draggable: true,
                label: {
                    show: true
                },
                data: data1,
                links: links1,
                categories: [
                { name: ":Disease", itemStyle: { color: "#c23531" } },
                { name: ":Drug", itemStyle: { color: "#2f4554" } },
                { name: ":Food", itemStyle: { color: "#61a0a8" } },
                { name: ":Check", itemStyle: { color: "#d48265" } },
                { name: ":Department", itemStyle: { color: "#91c7ae" } },
                { name: ":Producer", itemStyle: { color: "#749f83" } },
                { name: ":Symptom", itemStyle: { color: "#ca8622" } }
            ]
            }
        ],

    };



function formatterHover(params) {
  return '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">类：' + params.data.category + '</span>' + '<br>'
    + '<span style="padding-left:5px;width: 400px;display: inline-block;white-space: pre-wrap;">简介：' + params.data.desc + '</span>' +'<br>'
    + '<span style="padding-left:5px;width: 400px;display: inline-block;white-space: pre-wrap;">治疗科室：' + params.data.cure_department + '</span>' ;
}

    myChart.setOption(option);
</script>
</body>
</html>
